<script setup>
import {
  User,
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { RouterView } from "vue-router";
import router from "../router/index.js";
import { ref, reactive } from "vue";
import { useUserStore } from "../stores/user.js";
import { ElMessage } from "element-plus";

const options = reactive([
  "home1/booklist",
  "home1/information",
  "home1/borrowbook",
  "home1/comments",
  "",
]);


const i = ref(1);
const change = (index) => {
  router.push("/" + options[index - 1]);
};
change(i.value);


</script>

<template>
  <div>
    <div class="Home_top">欢迎使用“小李牌”图书馆</div>
    <div class="Home_main">
      <div class="Home_main_l">
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @select="change"
         
        >
          <el-menu-item index="1">
              <el-icon><location /></el-icon>
              <span>书籍列表</span>
           
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon><document /></el-icon>
            <span>个人资料</span>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon><setting /></el-icon>
            <span>借续还书</span>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon><setting /></el-icon>
            <span>个人评论</span>
          </el-menu-item>
          <el-menu-item index="5">
            <el-icon><setting /></el-icon>
            <span>退出登录</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="Home_main_r">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

<style scoped>
.Home_top {
  min-width: 800px;
  height: 70px;
  background-color: beige;
  line-height: 70px;
  font-size: 30px;
  padding-left: 400px;
}

.Home_main {
  display: flex;
  min-width: 800px;
}

.Home_main_l {
  width: 200px;
  height: 630px;
  /* background-color: palevioletred; */
}

.Home_main_r {
  flex: 1;
  min-width: 1000px;
  background-color: seashell;
}
</style>
